<!-- @author zhengjie -->
<template>
    <div class="node-room-box">
        <div class="room-headline">
            <div><img src="@/assets/images/home.png" class="room-icon">{{ machineRoom.machineRoomName }}</div>
            <div class="flex">
                <div class="flex room-lert">
                    <el-scrollbar class="room-ul">
                        <div class="room-li" v-for="item in machineRoom.pltCameraList" v-show="item.cameraName != null">
                            <div class="li-name">{{ item.cameraName }}</div>
                            <div class="li-type" :class="item.status == 0 ? '' : 'red'">{{ item.status == 0 ? '正常' : '异常' }}
                            </div>
                        </div>
                    </el-scrollbar>
                    <el-scrollbar class="room-ul">
                        <div class="room-li" v-for="item in machineRoom.pltSensorList" v-show="item.sensorName != null">
                            <div class="li-name">{{ item.sensorName }}</div>
                            <div class="li-type" :class="item.status == 0 ? '' : 'red'">{{ item.isNet == 0 ? '正常' : '异常' }}
                            </div>
                        </div>
                    </el-scrollbar>
                </div>


            </div>
        </div>

        <div class="room-antenna">
            <div class="room-antenna-ul flex-item">
                <div class="room-antenna-li-box flex-item" v-show="item.machineRoomId != null"
                    v-for="(item, index) in machineRoom.pltRadioStationList" :key="index">
                    <div class="li-br" v-if="index == 0"></div>
                    <div class="room-antenna-li">
                        <div class="flex room-antenna-headline-box">
                            <div class="flex room-antenna-headline">
                                <img src="@/assets/images/room-antenna.png" class="room-antenna-icon" />
                                <div class="room-antenna-id">{{ item.machineRoomId }}</div>
                            </div>
                            <div class="room-antenna-type" :class="item.status == 0 ? '' : 'red'">{{ item.isNet == 0 ? '正常' : '异常'
                            }}
                            </div>
                        </div>
                        <div class="room-antenna-name">{{ item.radioStationName }}</div>
                        <div class="room-antenna-button">
                            <img class="button-icon" src="@/assets/images/phon.png" style="width: 22px;height: 22px;margin-right: 15px;margin-left: 10px;">
                            <img class="button-icon" src="@/assets/images/i.png" style="width: 18px;height: 18px;margin-right: 15px;">
                            <img class="button-icon" src="@/assets/images/seb.png" style="width: 18px;height: 18px;margin-right: 15px;">
                            <img class="button-icon" src="@/assets/images/delete-yellow.png" style="width: 18px;height: 18px;margin-right: 15px;">
                            <img class="button-icon" src="@/assets/images/st.png" style="width: 18px;height: 18px;margin-right: 15px;">
                        </div>
                    </div>
                    <div class="li-br"></div>
                </div>

            </div>





        </div>
        <div></div>
    </div>
</template>
  
<script>
export default {
    name: 'NodeRoom',
    props: {
        width: {
            type: String
        },
        title: {
            type: String
        },
        visible: {
            type: Boolean,
        },
        type: {
            type: Boolean,
        },
        machineRoom: {
            type: Object,
        }
    },
    watch: {

    },
    data() {
        return {
            name: '',
            open: false,
        }
    },
    methods: {
        get() {
            console.log(this.machineRoom);
        },
        closeDialog() {//关闭回调
            this.$emit("closeDialog", false);
        },
    }
}
</script>
  
<style rel="stylesheet/scss" lang="scss" scoped>
.node-room-box {
    width: 880px;
    height: 110px;
    background-color: #272F45;
    border-radius: 5px;
    display: flex;
    align-items: center;
    color: #EDEDED;

    .room-box {
        width: 350px;
        // height: ;
    }

    .room-headline {
        // background-color: black;
        height: 100px;
        width: 240px;
        margin-left: 10px;



        .room-ul {
            width: 115px;
            border: none;
            height: 68px;

            .room-li {
                width: 105px;
                height: 20px;
                margin: 5px;
                background: #3A4156;
                border-radius: 2px;
                font-size: 13px;
                line-height: 22px;
                display: flex;

                .li-name {
                    width: 70px;
                    margin-left: 4px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }


        }
    }

    .room-lert {
        ::v-deep .is-horizontal {
            height: 0px;
            left: 0px;
            display: none;
        }


        ::v-deep .el-scrollbar__wrap {
            overflow-x: hidden;
        }
    }

    .room-icon {
        width: 25px;
        height: 25px;

    }

    .room-antenna {
        width: 620px;
        height: 100px;
    }







    .room-antenna-ul {
        width: 620px;
        overflow-x: hidden;
        /* 隐藏初始状态的滚动条 */
        height: 100px;
        // overflow: auto;
        /* 根据内容自动生成滚动条 */
        // scrollbar-color: none;
        overflow-x: auto;
        // overflow-x: hidden;
        overflow-y: hidden;
        white-space: nowrap;

        .room-antenna-li {
            padding: 5px;
            width: 185px;
            height: 80px;
            // background: rgb(12, 66, 129);
            margin: 5px;
            display: inline-block;

            .room-antenna-button {
                display: flex;
                align-items: center;
                width: 180px;
                // background-color: red;
                height: 30px;
                margin-top: 5px;
               .button-icon{
                cursor: pointer;
               }

            }

            .room-antenna-headline {
                display: flex;
                align-items: center;

                .room-antenna-icon {
                    margin-left: 5px;
                }

                .room-antenna-id {
                    width: 110px;
                    margin-left: 5px;
                }

            }

            .room-antenna-name {
                margin-top: 5px;
                width: 120px;
                height: 20px;
                margin-left: 25px;
            }

        }

        .room-antenna-icon {
            height: 24px;
            width: 15px;
        }

        // .room-antenna-type {}
    }

    .room-antenna-ul::-webkit-scrollbar {
        width: 12px;
        /* Width of the entire scrollbar */
    }

    .room-antenna-ul::-webkit-scrollbar-track {
        background: transparent;
        /* Make the scrollbar track transparent */
    }

    .room-antenna-ul::-webkit-scrollbar-thumb {
        background-color: #9A9DAA;
        /* Color of the scrollbar thumb */
        border-radius: 6px;
        /* Roundness of the scrollbar thumb */
    }

    // .room-antenna-ul::-webkit-scrollbar-thumb:hover {
    //     background-color: darkblue;
    //     /* Color of the scrollbar thumb on hover */
    // }

}

.li-br {
    height: 95px;
    width: 2px;
    background-color: #D8D8D8;
    display: inline-block;
}</style>
  